import SwiftUI

struct AnimatableAttributes_Color: View {
    @State var isBlue: Bool = true
    
    var body: some View {
        VStack(spacing: 30) {
            Divider() // Tips: Set navigation bar background...
            
            Text("Animatable Attributes")
                .font(.largeTitle)
            
            Text("Color")
                .font(.title)
                .foregroundColor(.gray)
            
            Text("You can animate the change from one color to another.")
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.cyan)
                .foregroundColor(.black)
            
            makeDemoView()
            
            Spacer()
            
            Button(action: {
                isBlue.toggle()
            }, label: {
                Text("Change")
                    .font(.title)
                    .padding(.bottom, 50)
            })
        }
        .navigationTitle("Color animation")
        .navigationBarTitleDisplayMode(.inline)
    }
    
    func makeDemoView() -> some View {
        // Color change
        // No animation
        // vs.
        // With animation
        VStack {
            Text("No Animation")
                .font(.title2)
                .foregroundColor(.brown)
            
            // Rectangle
            // Code semantics 代码语义
            RoundedRectangle(cornerRadius: 16) // 9 12 16 20
                .foregroundColor(isBlue ? .blue : .pink)
            
            Text("With Animation")
                .font(.title2)
                .foregroundColor(.yellow)

            // Rentangle
            RoundedRectangle(cornerRadius: 16) // 9 12 16 20
                .foregroundColor(isBlue ? .blue : .pink)
                .animation(.easeInOut, value: isBlue)
        }
        .padding(.horizontal)
    }
}










